<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>删除列表</title>
	<style type="text/css">
	    table{
	   	  border:1px solid #ccc;
	    }
        td{
        	width:100px;height:50px;border:1px solid #ccc; text-align:center;
        }
	</style>

	<script type="text/javascript">
        //要实现的功能：点删除按钮，删除一整行内容        
        window.onload = function(){
            //先抓取元素    删除按钮   通过类名
            var delecte = document.getElementsByClassName('delecte');
            
            //循环delecte
            for(var i=0;i<delecte.length;i++){
            	//在循环里面调用事件
                run(i);
            	
            }

            //写个方法  用num接收传进来的i值   这里是num是局部变量
            function run(num){
            	//在按钮上加点击事件
            	//getElementsByClassName()返回的是一个对象，获取元素用数组形式
            	delecte[num].onclick = function(){    
	                //通过parentNode找到tr
	                // delecte[i]的上一级delecte[i].parentNode是td
	                //delecte[i].parentNode(td)的上一级是delecte[i].parentNode.parentNode(tr)
	                delecte[num].parentNode.parentNode.style.display = 'none';  //num=0 1 2 3 4
	            }  

              
            }


        

        }
	</script>
</head>
<body>

    <table boder="1" cellspacing="0">
    	<tr>
    		<td>姓名</td>
    		<td>性别</td>
    		<td>年龄</td>
    		<td>操作</td>
    	</tr>
    	<tr>
    		<td>小明</td>
    		<td>男</td>
    		<td>27</td>
    		<td><input class="delecte" type="button" value="删除"><input type="button" value="修改"></td>
    	</tr>
    	<tr>
    		<td>小李</td>
    		<td>男</td>
    		<td>18</td>
    		<td><input class="delecte" type="button" value="删除"><input type="button" value="修改"></td>
    	</tr>
    	<tr>
    		<td>小红</td>
    		<td>女</td>
    		<td>17</td>
    		<td><input class="delecte" type="button" value="删除"><input type="button" value="修改"></td>
    	</tr>
    	<tr>
    		<td>小潘</td>
    		<td>女</td>
    		<td>23</td>
    		<td><input class="delecte" type="button" value="删除"><input type="button" value="修改"></td>
    	</tr>
    	<tr>
    		<td>小白</td>
    		<td>男</td>
    		<td>15</td>
    		<td><input class="delecte" type="button" value="删除"><input type="button" value="修改"></td>
    	</tr>
    </table>
	
</body>
</html>